
{% extends "base.html" %}

{% load static %}
{% load django_bootstrap5 %}
{% load django_bootstrap_input_group %}

{% comment %} Meta tags {% endcomment %}
{% block meta_tags %}
<link rel="stylesheet" href="{% static 'css/subpage.css' %}">
<script  src="{% static 'js/events.js' %}"></script>
{% endblock %}


{% block content %}

<main class="h-100 overflow-auto">
    <div class="container-sm overflow-auto py-3 col-xxl-6 col-xl-8">
        <h1 class="fs-1 mt-2 fw-bold text-center">
            {% if prompt %}{{prompt}}{% else %}Create Session{% endif %}
        </h1>
        <form method="post" class="p-4" class="overflow-auto">
            {% csrf_token %}
            {% bootstrap_grouped_form form %}

            <div class="d-flex justify-content-center">
                {{ form.form_buttons }}
            </div>
        </form>
    </div>
</main>


<script>
    function changeLabelColor(value, labelId) {
        var label = document.getElementById(labelId);
        label.style.color = value;
    }

    window.addEventListener('load', ()=>{
        const radioInputs = document.querySelectorAll('input[type=radio][name=color]');
        
        radioInputs.forEach(radioInput => {
            const label = document.querySelector(`[for=${radioInput.id}]`);
            
            label.style.color = radioInput.value
            label.classList.add('fw-bold')
        });
    });
</script>

{% endblock %}